<page-grid>
  <div nz-row [nzGutter]="24">
    <div nz-col>
      <h1 jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.home.title">Upload Files</h1>
      <form nz-form class="search__form">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="no">搜索</nz-form-label>
              <nz-form-control>
                <nz-input-group [nzSuffix]="searchSuffixTemplate">
                  <input type="text" nz-input name="jhiCommonSearchKeywords" [(ngModel)]="searchValue" placeholder="请输入关键字" />
                </nz-input-group>
                <ng-template #searchSuffixTemplate>
                  <i
                    nz-icon
                    nz-tooltip
                    class="ant-input-clear-icon"
                    nzTheme="fill"
                    nzType="close-circle"
                    *ngIf="searchValue"
                    (click)="searchValue = ''"
                  ></i>
                </ng-template>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8">
            <button nz-button type="submit" nzType="primary" (click)="loadPage()">查询</button>
            <button nz-button nzType="primary" [routerLink]="['./new']">增加</button>
            <button nz-button nzType="danger" *ngIf="numberOfChecked > 0" (click)="deleteByIdsConfirm()">批量删除</button>
          </div>
        </div>
      </form>
      <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
          <ng-template #message>
            已选择
            <strong class="text-primary">{{ numberOfChecked }}</strong> 项&nbsp;
          </ng-template>
        </nz-alert>
      </div>
      <nz-table #nzTable [nzData]="uploadFiles!" [nzScroll]="{ x: '100%' }">
        <thead>
          <tr>
            <th
              nzLeft="0px"
              nzWidth="48px"
              nzShowCheckbox
              [(nzChecked)]="isAllDisplayDataChecked"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event)"
            ></th>
            <th
              nzLeft="48px"
              nzWidth="52px"
              nzShowSort
              [(nzSortOrder)]="mapOfSort.id"
              (nzSortOrderChange)="sort('id', $event)"
              nzCustomFilter
            >
              <span jhiTranslate="global.field.id">ID</span>
              <i
                class="ant-table-filter-icon"
                nz-icon
                nz-dropdown
                #dropdown="nzDropdown"
                nzType="search"
                [nzDropdownMenu]="idmenu"
                [class.ant-table-filter-open]="dropdown.nzVisible"
                nzTrigger="click"
                nzPlacement="bottomRight"
                [nzClickHide]="false"
                nzTableFilter
              >
              </i>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.fullName"
              (nzSortOrderChange)="sort('fullName', $event)"
              nzCustomFilter
              *ngIf="showField('fullName')"
              [nzWidth]="fieldWidth('fullName')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.fullName">Full Name</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.name"
              (nzSortOrderChange)="sort('name', $event)"
              nzCustomFilter
              *ngIf="showField('name')"
              [nzWidth]="fieldWidth('name')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.name">Name</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.ext"
              (nzSortOrderChange)="sort('ext', $event)"
              nzCustomFilter
              *ngIf="showField('ext')"
              [nzWidth]="fieldWidth('ext')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.ext">Ext</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.type"
              (nzSortOrderChange)="sort('type', $event)"
              nzCustomFilter
              *ngIf="showField('type')"
              [nzWidth]="fieldWidth('type')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.type">Type</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.url"
              (nzSortOrderChange)="sort('url', $event)"
              nzCustomFilter
              *ngIf="showField('url')"
              [nzWidth]="fieldWidth('url')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.url">Url</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.path"
              (nzSortOrderChange)="sort('path', $event)"
              nzCustomFilter
              *ngIf="showField('path')"
              [nzWidth]="fieldWidth('path')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.path">Path</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.folder"
              (nzSortOrderChange)="sort('folder', $event)"
              nzCustomFilter
              *ngIf="showField('folder')"
              [nzWidth]="fieldWidth('folder')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.folder">Folder</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.entityName"
              (nzSortOrderChange)="sort('entityName', $event)"
              nzCustomFilter
              *ngIf="showField('entityName')"
              [nzWidth]="fieldWidth('entityName')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.entityName">Entity Name</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.createAt"
              (nzSortOrderChange)="sort('createAt', $event)"
              nzCustomFilter
              *ngIf="showField('createAt')"
              [nzWidth]="fieldWidth('createAt')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.createAt">Create At</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.fileSize"
              (nzSortOrderChange)="sort('fileSize', $event)"
              nzCustomFilter
              *ngIf="showField('fileSize')"
              [nzWidth]="fieldWidth('fileSize')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.fileSize">File Size</span>
            </th>
            <th
              nzShowSort
              [(nzSortOrder)]="mapOfSort.referenceCount"
              (nzSortOrderChange)="sort('referenceCount', $event)"
              nzCustomFilter
              *ngIf="showField('referenceCount')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.referenceCount">Reference Count</span>
            </th>
            <th
              [nzWidth]="relationshipWidth('user')"
              nzShowSort
              [(nzSortOrder)]="mapOfSort.user"
              (nzSortOrderChange)="sort('user', $event)"
              nzShowFilter
              [nzFilters]="mapOfFilter.user?.list"
              (nzFilterChange)="filter('user', $event)"
              *ngIf="showRelationship('user')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.user">User</span>
            </th>
            <th
              [nzWidth]="relationshipWidth('category')"
              nzShowSort
              [(nzSortOrder)]="mapOfSort.category"
              (nzSortOrderChange)="sort('category', $event)"
              nzShowFilter
              [nzFilters]="mapOfFilter.category?.list"
              (nzFilterChange)="filter('category', $event)"
              *ngIf="showRelationship('category')"
            >
              <span jhiTranslate="jhipsterSampleApplicationApp.filesUploadFile.category">Category</span>
            </th>
            <th nzWidth="160px" nzRight="0px">操作</th>
          </tr>
        </thead>
        <tbody>
          <ng-template ngFor let-uploadFile [ngForOf]="nzTable.data">
            <tr>
              <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="mapOfCheckedId[uploadFile.id!]" (nzCheckedChange)="refreshStatus()"></td>
              <td nzLeft="48px">{{ uploadFile.id }}</td>
              <td *ngIf="showField('fullName')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namefullNameTpl">
                  {{ uploadFile.fullName }}
                </ng-container>
                <ng-template #namefullNameTpl>
                  <input nz-input type="text" name="fullName" [(ngModel)]="uploadFile.fullName" />
                </ng-template>
              </td>
              <td *ngIf="showField('name')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namenameTpl">
                  {{ uploadFile.name }}
                </ng-container>
                <ng-template #namenameTpl>
                  <input nz-input type="text" name="name" [(ngModel)]="uploadFile.name" />
                </ng-template>
              </td>
              <td *ngIf="showField('ext')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else nameextTpl">
                  {{ uploadFile.ext }}
                </ng-container>
                <ng-template #nameextTpl>
                  <input nz-input type="text" name="ext" [(ngModel)]="uploadFile.ext" />
                </ng-template>
              </td>
              <td *ngIf="showField('type')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else nametypeTpl">
                  {{ uploadFile.type }}
                </ng-container>
                <ng-template #nametypeTpl>
                  <input nz-input type="text" name="type" [(ngModel)]="uploadFile.type" />
                </ng-template>
              </td>
              <td *ngIf="showField('url')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else nameurlTpl">
                  {{ uploadFile.url }}
                </ng-container>
                <ng-template #nameurlTpl>
                  <input nz-input type="text" name="url" [(ngModel)]="uploadFile.url" />
                </ng-template>
              </td>
              <td *ngIf="showField('path')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namepathTpl">
                  {{ uploadFile.path }}
                </ng-container>
                <ng-template #namepathTpl>
                  <input nz-input type="text" name="path" [(ngModel)]="uploadFile.path" />
                </ng-template>
              </td>
              <td *ngIf="showField('folder')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namefolderTpl">
                  {{ uploadFile.folder }}
                </ng-container>
                <ng-template #namefolderTpl>
                  <input nz-input type="text" name="folder" [(ngModel)]="uploadFile.folder" />
                </ng-template>
              </td>
              <td *ngIf="showField('entityName')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else nameentityNameTpl">
                  {{ uploadFile.entityName }}
                </ng-container>
                <ng-template #nameentityNameTpl>
                  <input nz-input type="text" name="entityName" [(ngModel)]="uploadFile.entityName" />
                </ng-template>
              </td>
              <td *ngIf="showField('createAt')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namecreateAtTpl">
                  {{ uploadFile.createAt }}
                </ng-container>
                <ng-template #namecreateAtTpl>
                  <nz-date-picker [(ngModel)]="uploadFile.createAt" nzShowTime></nz-date-picker>
                </ng-template>
              </td>
              <td *ngIf="showField('fileSize')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namefileSizeTpl">
                  {{ uploadFile.fileSize }}
                </ng-container>
                <ng-template #namefileSizeTpl>
                  <nz-input-number name="fileSize" [(ngModel)]="uploadFile.fileSize"></nz-input-number>
                </ng-template>
              </td>
              <td *ngIf="showField('referenceCount')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else namereferenceCountTpl">
                  {{ uploadFile.referenceCount }}
                </ng-container>
                <ng-template #namereferenceCountTpl>
                  <nz-input-number name="referenceCount" [(ngModel)]="uploadFile.referenceCount"></nz-input-number>
                </ng-template>
              </td>
              <td *ngIf="showRelationship('user')">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else nameTpl">
                  <nz-avatar nzIcon="user" [nzText]="uploadFile?.user?.login" *ngIf="uploadFile?.user?.id"></nz-avatar>
                </ng-container>
                <ng-template #nameTpl>
                  <nz-select style="width: 120px" nzShowSearch nzAllowClear nzPlaceHolder="选择用户" [(ngModel)]="uploadFile!.user">
                    <nz-option
                      nzCustomContent
                      *ngFor="let userOption of usersCollection; trackBy: trackUserById"
                      [nzLabel]="userOption.firstName || null"
                      [nzValue]="userOption.id"
                    >
                      <nz-avatar nzIcon="user" [nzSrc]="userOption.imageUrl"></nz-avatar> {{ userOption.firstName }}
                    </nz-option>
                  </nz-select>
                </ng-template>
                {{ uploadFile?.user?.login }}
              </td>
              <td *ngIf="showRelationship('category')">
                <div *ngIf="uploadFile?.category?.id">
                  <a [routerLink]="['../resource-category', uploadFile!.category?.id, 'view']">{{ uploadFile!.category?.title }}</a>
                </div>
              </td>
              <td nzRight="0px">
                <ng-container *ngIf="!editStatus[uploadFile.id!]?.edit; else saveTpl">
                  <button nz-button nzType="default" nzShape="circle" nz-tooltip nzTooltipTitle="行改" (click)="startEdit(uploadFile)">
                    <i nz-icon [nzType]="'file-text'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
                  </button>
                  <button
                    nz-button
                    nzType="danger"
                    nzShape="circle"
                    nz-tooltip
                    nzTooltipTitle="删除"
                    (click)="deleteConfirm(uploadFile.id)"
                  >
                    <i nz-icon nzType="close" nzTheme="outline"></i>
                  </button>
                  <button
                    nz-button
                    nzType="primary"
                    nzShape="circle"
                    nz-tooltip
                    nzTooltipTitle="编辑"
                    [routerLink]="['./', uploadFile.id, 'edit']"
                  >
                    <i nz-icon nzType="setting"></i>
                  </button>
                </ng-container>
                <ng-template #saveTpl>
                  <a (click)="saveEdit(uploadFile)">保存</a>
                  <a nz-popconfirm nzPopconfirmTitle="是否保存？" (nzOnConfirm)="cancelEdit(uploadFile.id)">取消</a>
                </ng-template>
              </td>
            </tr>
          </ng-template>
        </tbody>
      </nz-table>
      <nz-dropdown-menu #idmenu="nzDropdownMenu">
        <div class="search-box">
          <div>
            <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
            <span>-</span>
            <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
          </div>
          <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">Search</button>
          <button nz-button nzSize="small" (click)="reset()">Reset</button>
        </div>
      </nz-dropdown-menu>
      <nz-dropdown-menu #textMenu="nzDropdownMenu">
        <div class="search-box">
          <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
          <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">Search</button>
          <button nz-button nzSize="small" (click)="reset()">Reset</button>
        </div>
      </nz-dropdown-menu>
      <nz-dropdown-menu #dateMenu="nzDropdownMenu">
        <div class="search-box">
          <nz-range-picker [(ngModel)]="dateRange" style="display: block; width: 260px; margin-bottom: 8px"></nz-range-picker>
          <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">Search</button>
          <button nz-button nzSize="small" (click)="reset()">Reset</button>
        </div>
      </nz-dropdown-menu>
    </div>
  </div>
</page-grid>
